import React, { Component } from 'react'
import { View, Text, Image, Dimensions, ScrollView, StyleSheet, RefreshControl } from 'react-native'
import Swiper from 'react-native-swiper'
import Card from '../../../../../components/Card'
import Wrap from '../../../../../components/Wrap'
import { mainColor } from '../../../../../utils/const'

const { width } = Dimensions.get('window')

const styles = StyleSheet.create({
  actions: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    alignItems: 'center',
    padding: 18,
    borderBottomWidth: 1,
    borderBottomColor: '#f2f2f2'
  },
  action: {
    flexDirection: 'column',
    alignItems: 'center'
  },
  actionImg: {
    width: 48,
    height: 48
  },
  actionText: {
    paddingTop: 10,
    fontSize: 12
  }
})

const cardStyles = StyleSheet.create({
  wrapItem: {
    width: width*0.3,
    flexDirection: 'column',
    alignContent: 'flex-start'
  },
  image: {
    width: width*0.3,
    height: width*0.3,
    borderRadius: 3
  },
  text: {
    paddingTop: 9,
    paddingBottom: 20,
    fontSize: 12
  }
})

export default class Found extends Component {
  state = {
    refreshing: true,
    imgList: [
      'http://p1.music.126.net/SAS6xNBn9kTmb0AKuZGxdg==/109951164270655042.jpg',
      'http://p1.music.126.net/Qtt5odVhWC4VWy-__V2AWg==/109951164269970730.jpg',
      'http://p1.music.126.net/TMalquknmG9NjkJ4qGHt4g==/109951164270651234.jpg',
      'http://p1.music.126.net/8GPZ91i0rBteF33MEPJHHQ==/109951164270648824.jpg',
      'http://p1.music.126.net/uqHwzINTHDdmOdDvtFBgYg==/109951164270669173.jpg',
      'http://p1.music.126.net/ojuXpfpUhU_F1t08E7BIFQ==/109951164270661530.jpg'
    ],
    songList: [
      {
        img: 'http://p2.music.126.net/IkO4ZYPmvt5wGMer7fB-8g==/109951164271719654.jpg?param=140y140',
        amount: 72,
        desc: '立秋 | 愿所有夏日遗憾，都被秋风温柔化解'
      },
      {
        img: 'http://p2.music.126.net/2KEbtFD68jB43gXpHwylgg==/19126004765780202.jpg?param=140y140',
        amount: 19,
        desc: '『夏日终曲』沙滩摇滚与褪去炽热的海风'
      },
      {
        img: 'http://p2.music.126.net/fXqqtoBjkEAJHYDgOBGW2w==/109951163613409873.jpg?param=140y140',
        amount: 381,
        desc: '经典粤语合集【无损音质】黑胶唱片会员专属'
      },
      {
        img: 'http://p1.music.126.net/Ykdbus1htTiWp3dO61C-LQ==/109951164269791836.jpg?param=140y140',
        amount: 182,
        desc: '我的名字（Cover：焦迈奇）'
      },
      {
        img: 'http://p2.music.126.net/Vul1lVY04aTjJU984riRXw==/19056735533185390.jpg?param=140y140',
        amount: 1045,
        desc: '【精选】欧美踩点混剪bgm燃向/剧情向'
      },
      {
        img: 'http://p1.music.126.net/njp9BG6XVS49q0x6FTosjA==/109951164274839072.jpg?param=140y140',
        amount: 51,
        desc: '神仙翻唱丨超好听的翻唱cover集鸭'
      }
    ]
  }
  componentWillMount(){
    this.loadData();
  }
  loadData() {
    this.setState({
      refreshing: true
    })
    setTimeout(() => {
      this.setState({
        refreshing: false
      })
    }, 300);
  }
  render() {
    let { imgList, songList, refreshing } = this.state
    return (
      <ScrollView refreshControl={
        <RefreshControl
          colors={[mainColor]}
          refreshing={refreshing}
          onRefresh={this.loadData.bind(this)}
        />
      }
      showsVerticalScrollIndicator={false}>
        <Swiper autoplay={true} height={193 + 36} activeDotColor={mainColor}>
          {
            imgList.map((item, index) => {
              return (
                <View key={index} style={{flex: 1, flexDirection: 'row',justifyContent: 'center', alignItems: 'center'}}>
                  <Image source={{uri: item}} style={{width: width - 36, height: 193, borderRadius: 6}}/>
                </View>  
              )
            })
          }
        </Swiper>

        <View style={styles.actions}>
          <View style={styles.action}>
            <Image style={styles.actionImg} source={require('../../../../../assets/icon/calendar.png')}/>
            <Text style={styles.actionText}>每日推荐</Text>
          </View>
          <View style={styles.action}>
            <Image style={styles.actionImg} source={require('../../../../../assets/icon/song.png')}/>
            <Text style={styles.actionText}>歌单</Text>
          </View>
          <View style={styles.action}>
            <Image style={styles.actionImg} source={require('../../../../../assets/icon/rank.png')}/>
            <Text style={styles.actionText}>排行榜</Text>
          </View>
          <View style={styles.action}>
            <Image style={styles.actionImg} source={require('../../../../../assets/icon/radio.png')}/>
            <Text style={styles.actionText}>电台</Text>
          </View>
          <View style={styles.action}>
            <Image style={styles.actionImg} source={require('../../../../../assets/icon/live.png')}/>
            <Text style={styles.actionText}>直播</Text>
          </View>
        </View>
        
        <Card title="推荐歌单" btnTitle="歌单广场">
          <Wrap>
            {
              songList.map((item, index) => {
                return (
                  <View key={index} style={cardStyles.wrapItem}>
                    <Image source={{uri: item.img}} style={cardStyles.image}/>
                    <Text style={cardStyles.text}>{item.desc}</Text>
                  </View>
                )
              })
            }
          </Wrap>
        </Card>

        <Card title="推荐歌单" btnTitle="歌单广场">
          <Wrap>
            {
              songList.map((item, index) => {
                return (
                  <View key={index} style={cardStyles.wrapItem}>
                    <Image source={{uri: item.img}} style={cardStyles.image}/>
                    <Text style={cardStyles.text}>{item.desc}</Text>
                  </View>
                )
              })
            }
          </Wrap>
        </Card>

      </ScrollView>
    )
  }
}